import type { GreasyForkElements } from '../../../../../../../../../types/constants/personalization/greasy_fork'
import { PageHandler } from '../../../../../../../../../lib/page_handler'
import {
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../../types/constants'
import { BADGE_STYLES } from '../../../../../../../../../types/constants/styles/badge'

// 测试链接：https://greasyfork.org/zh-CN/import
export class ImportPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private static instance: ImportPage
  private pageHandler: PageHandler = PageHandler.getInstance()
  private readonly selector: string = '.text-content'

  /**
   * 获取单例实例
   */
  public static getInstance(): ImportPage {
    if (!ImportPage.instance) {
      ImportPage.instance = new ImportPage()
    }
    return ImportPage.instance
  }

  init(): void {
    // 添加徽章
    this.addFailedBadge()
  }

  /**
   * 添加失败提示徽章
   */
  private addFailedBadge(): void {
    const $failedSync = $(`${this.selector} .failed-sync`)
    this.pageHandler.features.badge.addBadge($failedSync, 'failed-sync', '失败', { backgroundColor: BADGE_STYLES.error })
  }

  getMainStyles(): string {
    return `
.text-content {
  .radio-group {
    padding-top: 0 !important;
  }
  
  .failed-sync {
    background-color: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 5px !important;
  }
}
`
  }
}
